<template>
   <div class="sdy-register">
      <SdyHeader title="啥都有 ~ 注册" back></SdyHeader>
      <van-steps class="steps" :active="active" finish-icon="like-o">
         <van-step>手机号验证</van-step>
         <van-step>验证码验证</van-step>
         <van-step>填写密码</van-step>
         <van-step>注册完成</van-step>
      </van-steps>
      <!-- 每一个步骤的内容 -->
      <!-- 步骤1：验证手机号是否被注册过 -->
      <div v-if="active === 0" class="step0 step-item">
         <van-form class="login-form" @submit="clickPhoneHandler">
            <van-cell-group inset>
               <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号"
                  :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]" />
            </van-cell-group>
            <div style="margin: 16px;">
               <van-button round block type="primary" native-type="submit">
                  验证
               </van-button>
            </div>
         </van-form>
      </div>
      <!-- 步骤2：获取验证码并验证验证码正确性 -->
      <div v-if="active === 1" class="step1 step-item">
         <van-form class="login-form" @submit="clickCodeHandler">
            <van-cell-group inset>
               <van-field v-model="code" center clearable placeholder="请输入短信验证码">
                  <template #button>
                     <van-button class="button" :disabled="codeBtn" @click="sendCodeHandler" size="small" type="primary">
                         <van-count-down v-show="codeBtn" ref="click" :auto-start="false" :time="5000" format="ss"/>发送验证码
                     </van-button>
         
                  </template>
               </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
               <van-button round block type="primary" native-type="submit">
                  验证
               </van-button>
            </div>
         </van-form>
      </div>
      <!-- 步骤3：验证两次密码一致 -->
      <div v-if="active === 2" class="step2 step-item">
         <van-form class="login-form" @submit="clickpwdHandler">
            <van-cell-group inset>
               <van-field v-model="password" name="密码" label="密码" placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <van-cell-group inset>
               <van-field v-model="rpassword" name="重复密码" label="重复密码" placeholder="重复密码"
                  :rules="[{ required: true, message: '请填写重复密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
               <van-button round block type="primary" native-type="submit">
                  验证
               </van-button>
            </div>
         </van-form>
      </div>
      <div v-if="active === 3" class="step3 step-item">
         <van-icon class="finish" name="passed" />
         <router-link to="/login">
            <van-button type="success">去登录</van-button>
         </router-link>
      </div>
   </div>
</template>
<script setup lang="ts">

import { ref } from 'vue'
// 导入相关请求接口
import { phoneApi, sendCodeApi, clickCodeApi, registerApi } from '@/api/users'
import { Loading, Toast } from 'vant';

const active = ref<number>(0)

// 1验证手机号
const phone = ref<string>('')
const clickPhoneHandler = async () => {
   const res = await phoneApi(phone.value)
   console.log(res);
   // 根据请求回来的数据 判断
   if (((res as unknown) as { code: string }).code === '200') {
      active.value++
      return
   }
   // 代码执行到这里, 说明手机号不行
   Toast({
      message: '手机号被注册',
      icon: 'phone-circle-o',
   });
}
// 2.验证验证码
const code = ref<string>('')
// 发送验证码是否禁用标识
const codeBtn = ref<boolean>(false)
// 发送验证码
// const show=ref<boolean>(true)
const click=ref<any>(null)
const sendCodeHandler =  async() => {
   const res = await sendCodeApi(phone.value)
   codeBtn.value = true
   console.log(res);

   click.value.start()
   setTimeout(()=>{
      click.value.reset()
      // 取消禁止标识
      codeBtn.value = false
   },5000)
}

// 验证验证码
const clickCodeHandler = async () => {
   const res = await clickCodeApi(phone.value, code.value)

   // 根据请求回来的数据 判断
   if (((res as unknown) as { code: string }).code === '200') {
      active.value++
      return
   }
   // 代码执行到这里, 说明验证码错误
   Toast({
      message: '验证码错误',
      icon: 'phone-circle-o',
   });

}

// 验证密码
// 采集密码
const password = ref<string>('')
const rpassword = ref<string>('')

const clickpwdHandler = async () => {
   // 两次密码不一致
   if (password.value !== rpassword.value) return Toast({
      message: '两次密码输入不一致',
      icon: 'phone-circle-o',
   })

   // 发送请求
   const res = await registerApi(phone.value, password.value)

   // 根据请求回来的数据 判断
   if (((res as unknown) as { code: string }).code === '200') {
      active.value++
      return
   }
   // 代码执行到这里, 说明注册失败
   Toast({
      message: '注册失败，请重试',
      icon: 'phone-circle-o',
   });
}
</script>
  
<style scoped lang="scss">
.sdy-register {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   >.steps {
      width: 90%;
   }
   >.button{
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
      }
   >.step-item {
      width: 90%;
      height: 300px;
      border: 1px solid #333;
      border-radius: 25px;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
   }
   .finish{
      font-size: 100px;
      color: green;
   }
 }
</style>